<template>
	<div class="homebox">
		<Tabbar :leftText="$t('textTrans.分享')"></Tabbar>
		<div style="display: flex;justify-content: center;">
			<div id="qrcode"></div>
		</div>
		<div style="font-size: 15px;text-align: center;">

			<div style="font-size: 20px;margin: 20px 0 15px 0;">{{$t('textTrans.邀请您的联系人')}}</div>
			<div style="color: #999999;">{{$t('textTrans.或朋友并获得奖励')}}</div>
		</div>
		<div class="share-back">
			<div style="margin-top: 25px;">{{$t('textTrans.推荐并获得奖励')}}</div>
			<div style="margin: 15px 0;">{{$t('textTrans.分享您的推荐链接并开始赚钱')}}</div>
			<div style="background: white;border-radius: 10px;width: 90%;padding: 15px 5%;display: flex;justify-content: space-between;align-items: center;">
				<div style="width: 170px;overflow: auto;color: #333;white-space:nowrap;">{{copyContent}}</div>
				<van-button round type="primary" :data-clipboard-text="copyContent" data-clipboard-action="copy"
					id="copyBtn" size="mini" color='#00A170'> {{$t('textTrans.复制链接')}}</van-button>
			</div>
	<!-- 		<van-cell style="width: 100%;border-radius: 10px;"  :value="copyContent">
				<template #right-icon>
		
				</template>
			</van-cell> -->
		</div>
	</div>
	</div>
</template>
<script>
	import QRCode from "qrcodejs2";
	import Clipboard from "clipboard";
	import {
		usershare,
		userInfo,
	} from "@/api/personal";
	export default {
		data() {
			return {
				data: [],
				locale: "en",
				copyContent: '',
				uuid: "",
				codeArr: [],
			};
		},
		mounted() {
			this.getData();
			let _this = this;
			const clipboard = new Clipboard("#copyBtn");
			clipboard.on("success", function() {
				_this.$toast("Copy succeeded");
			});
			clipboard.on("error", function() {
				this.$toast("copy failed");
			});
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1);
			},
			getData() {
				usershare().then((res) => {
				this.data = res;
				this.copyContent = res.register_url
				// this.codeArr = res.uuid.split("");
				this.qrcode();
				});
			},
			qrcode() {
				let qrcode = new QRCode("qrcode", {
					width: 110, // 设置宽度，单位像素
					height: 110, // 设置高度，单位像素
					render: "table",
					text: this.copyContent, // 二维码内容
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	/deep/.van-cell__value{
		width: 130px;
		overflow: auto;
	}
	.share-back {
		box-sizing: border-box;
		padding: 20px;
		font-size: 15px;
		color: white;
		width: 90%;
		height: 200px;
		margin: 50px auto;
		background: url(../../assets/imgs/home/share.png) no-repeat;
		background-size: 100% 100%;
	}

	.homebox {
		width: 100%;
		height: 100%;
		background: url('../../assets/imgs/home/background.png') no-repeat;
		background-size: 100% 100%; 
		position: relative;
	}

	/deep/#qrcode {
		display: flex;
		justify-content: space-between;
		text-align: center;
		background: #B5F3EA;
		border-radius: 8px;
		padding: 14px;

		img {
			text-align: center;
			width: 110px;
			height: 110px;
		}
	}

	.van-nav-bar {
		background: transparent;
		border: none;

		/deep/.van-nav-bar__title {
			color: #fff;
		}

		/deep/ .van-icon {
			color: #fff;
		}
	}


	#copyCode {
		border: 0 none;
		background: transparent;
	}
</style>
